<template>
  <div>
    <el-row>
      <p class="pinformation">检测内容列表</p>
      <p class="totalStyle">共 {{ total }} 条数据</p>
      <el-row style="padding-bottom: 5px; margin-left: 300px">
        <el-button link type="success" @click="handleCompute">加载数据</el-button>
        <el-button link type="success" @click="toExcel" :disabled="!form.discountPrice"
          >导出Excel表格</el-button
        >
      </el-row>
    </el-row>
    <el-table
      class="business"
      v-loading="loading"
      :data="jcContentList"
      height="30vh"
      :show-summary="true"
      :summary-method="getSummaries"
      border
    >
      <el-table-column
        show-overflow-tooltip
        width="120"
        fixed
        label="检测类别"
        align="center"
        prop="jclbName"
      />
      <el-table-column
        show-overflow-tooltip
        width="120"
        fixed
        label="点位名称"
        align="center"
        prop="pointName"
      />
      <el-table-column
        show-overflow-tooltip
        width="120"
        fixed
        label="组别"
        align="center"
        prop="groupName"
      />
      <el-table-column
        show-overflow-tooltip
        width="130"
        fixed
        label="检测项目"
        align="center"
        prop="jcxmName"
      />
      <el-table-column
        show-overflow-tooltip
        width="160"
        label="方法编号"
        align="center"
        prop="methodCode"
      />
      <el-table-column
        show-overflow-tooltip
        label="方法名称"
        width="280"
        align="center"
        prop="methodName"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="连测天数"
        align="center"
        prop="sampleDay"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="连测频次"
        align="center"
        prop="sampleCount"
      />
      <el-table-column
        show-overflow-tooltip
        width="70"
        label="周期"
        align="center"
        prop="cycleTypeName"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="周期次数"
        align="center"
        prop="cycleCount"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="合计天数"
        align="center"
        prop="sumDayCount"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="合计次数"
        align="center"
        prop="sumTimeCount"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="采样单价/元"
        align="center"
        prop="cyPrice"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="分析单价/元"
        align="center"
        prop="analysePrice"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="其他单价/元"
        align="center"
        prop="otherPrice"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        fixed="right"
        label="合计单价/元"
        align="center"
        prop="sumPrice"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        fixed="right"
        label="合计/元"
        align="center"
        prop="totalPrice"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        fixed="right"
        label="折扣"
        align="center"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        fixed="right"
        label="折扣合计/元"
        align="center"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        fixed="right"
        label="备注"
        align="center"
      >
      </el-table-column>
    </el-table>
    <el-row style="width: 100%">
      <el-col :span="18">
        <pagination
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="padding: 10px">
        <el-row>
          <p class="pinformation">其它费用</p>
          <p class="totalStyle">共 {{ OtherExpenses.length }} 条数据</p>
        </el-row>
        <el-table
          class="business"
          v-loading="loading1"
          :data="OtherExpenses"
          ref="mainTableRef"
          :show-summary="true"
          :summary-method="getOtherSummaries"
          border
        >
          <el-table-column
            show-overflow-tooltip
            label="费用名目"
            align="center"
            prop="name"
          />
          <el-table-column
            show-overflow-tooltip
            label="数量"
            align="center"
            prop="count"
            width="160"
          >
            <template #default="scope">
              <el-input-number
                placeholder="请输入数量"
                :min="0"
                style="width: 100%"
                controls-position="right"
                v-model="scope.row.count"
              />
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="单价/元"
            align="center"
            prop="price"
            width="100"
          />
          <el-table-column
            show-overflow-tooltip
            label="合计/元"
            align="center"
            prop="sumPrice"
            width="100"
          />
        </el-table>
      </el-col>
      <el-col :span="16" style="padding: 10px">
        <p class="pinformation" style="margin-top: 10px">费用合计</p>
        <el-row>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="合计总价：" prop="totalPrice">
              {{ form.totalPrice }} {{ form.totalPrice ? "元" : "" }}
            </el-form-item>
            <el-form-item label="税率：" prop="taxPoint" label-width="50">
              <el-input-number
                :min="0"
                :precision="1"
                style="width: 90px"
                controls-position="right"
                v-model="form.taxPoint"
              />
              　%
            </el-form-item>
            <el-form-item label="税后总价：" prop="taxPrice" label-width="80">
              <el-input-number
                :min="0"
                :precision="1"
                style="width: 150px"
                controls-position="right"
                v-model="form.taxPrice"
              />
            </el-form-item>
            <el-form-item label="折扣：" prop="discount" label-width="50">
              <el-input-number
                :min="0"
                :max="100"
                :precision="1"
                style="width: 90px"
                controls-position="right"
                v-model="form.discount"
              />
            </el-form-item>
            <el-form-item label="折扣总计：" prop="discountPrice" label-width="80">
              <el-input-number
                :min="0"
                :precision="1"
                style="width: 150px"
                controls-position="right"
                v-model="form.discountPrice"
              />
              　元
            </el-form-item>
          </el-form>
        </el-row>
        <p class="pinformation">操作</p>
        <el-row>
          <el-col :span="3">
            <el-button type="success" @click="handleCount">计算</el-button>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {
  postCalculation,
  getContentList,
  getOtherList,
  postPriceData,
  getDiscountFrom,
  putPriceData,
} from "@/api/price/priceQuotation";
import { getToken } from "@/utils/auth";
import { getConfigKey } from "@/api/system/orgConfig";
const { proxy } = getCurrentInstance();
const jcContentList = ref([]);
const OtherExpenses = ref([]);
const loading = ref(false);
const loading1 = ref(false);
const total = ref(0);
const sum = ref(0);
const otherSum = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const form = ref({});

const props = defineProps({
  priceId: {
    type: String, //参数类型
    required: true, //是否必须传递
  },
});

getList();
function getList() {
  loading.value = true;
  queryParams.value.priceId = props.priceId;
  getContentList(queryParams.value).then((res) => {
    jcContentList.value = res.rows;
    total.value = res.total;
    sum.value = res.sum;
    loading.value = false;
    if (jcContentList.value.length === 0 && isCompute.value) {
      handleCompute();
      isCompute.value = false;
    }
  });
}

const isCompute = ref(true);

getOtherTable();
function getOtherTable() {
  loading1.value = true;
  getOtherList({ priceId: props.priceId }).then((res) => {
    OtherExpenses.value = res.data;
    otherSum.value = res.sum;
    loading1.value = false;
  });
}

function handleCompute() {
  postCalculation(props.priceId).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
    getList();
    getOtherTable();
    getForm();
  });
}

const heightParams = ref([{ tableName: "main", bottomHeight: 31 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

function handleCount() {
  let valid = true;
  // if (!form.value.discount) {
  //   proxy.$modal.msgError("折扣不能为空！");
  //   return;
  // }
  for (let i = 0; i < OtherExpenses.value.length; i++) {
    if (
      OtherExpenses.value[i].count === undefined ||
      OtherExpenses.value[i].count === null
    ) {
      valid = false;
      break;
    }
  }
  if (!valid) {
    proxy.$modal.msgError("数量未填写完整！");
    return;
  }
  postPriceData({
    priceId: props.priceId,
    otherDataList: OtherExpenses.value,
    discount: form.value.discount,
    discountPrice: form.value.discountPrice,
    taxPoint: form.value.taxPoint,
    taxPrice: form.value.taxPrice,
    discountCal: $("#discountCal").val(),
    discountCalPrice: $("#discountCalPrice").val(),
  }).then((res) => {
    proxy.$modal.msgSuccess("计算成功！");
    getForm();
    getOtherTable();
  });
}

getForm();
function getForm() {
  getDiscountFrom(props.priceId).then((res) => {
    form.value = res.data || {};
    if (form.value.discount) {
      form.value.discount = parseFloat(form.value.discount);
    }
    if (form.value.discountPrice) {
      form.value.discountPrice = parseFloat(form.value.discountPrice);
    }
    if (form.value.taxPoint) {
      form.value.taxPoint = parseFloat(form.value.taxPoint);
    }
    if (form.value.taxPrice) {
      form.value.taxPrice = parseFloat(form.value.taxPrice);
    }
    if (form.value.discountCal) {
      $("#discountCal").val(form.value.discountCal);
    }
    if (form.value.discountCalPrice) {
      $("#discountCalPrice").val(form.value.discountCalPrice);
    }
  });
}

onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

function remarkChange(row) {
  putPriceData(row);
}

const getSummaries = (param) => {
  const sums = [];

  // 设置第一列的合并行
  sums[0] = "合计";

  // 设置第二到第十八列合并为一列，并显示合计值为 1080
  sums[16] = sum.value + "元";
  nextTick(() => {
    const tds = document.querySelector(".el-table__footer").querySelectorAll("td");
    if (tds.length < 19) {
      return;
    }
    let a = tds[17].querySelector(".cell");
    let html =
      '<input class="ipt-noBorder" id="discountCal" type="text" style="width:95%"/>';
    a.innerHTML = html;
    if (form.value.discountCal) {
      $("#discountCal").val(form.value.discountCal);
    }
    a = tds[18].querySelector(".cell");
    html =
      '<input class="ipt-noBorder" id="discountCalPrice" type="text" style="width:95%"/>';
    a.innerHTML = html;
    if (form.value.discountCalPrice) {
      $("#discountCalPrice").val(form.value.discountCalPrice);
    }
  });
  return sums;
};

const getOtherSummaries = (param) => {
  const sums = [];

  // 设置第一列的合并行
  sums[0] = "合计";

  // 设置第二到第十八列合并为一列，并显示合计值为 1080
  sums[3] = otherSum.value + "元";
  return sums;
};

function toExcel() {
  getConfigKey("price_excel_url").then((res) => {
    // 使用 $router.push 方法来跳转到指定的页面
    const url = `${import.meta.env.VITE_APP_BASE_API}${res.msg}?priceId=${
      props.priceId
    }&token=${getToken()}`;
    window.open(url, "_blank");
  });
}
</script>
<style></style>
